<template>
  <rx-layout>
    <template v-slot:center>
      <div class="Transfer-center">
        <a style="color: #4d9eff;display:inline-block;padding-bottom: 16px;">{{ form.subject }}</a>
        <div style="margin-bottom: 0.5rem">
          <div style="margin-bottom: 0.25rem">{{i18n('transferType','流转类型')}}</div>
          <span v-for="radioItem in transferOptions">
            <radio :checked="radioItem.value == form.transferType" @click.stop="form.transferType=radioItem.value"/>
            <span style="margin-right: 1rem">{{ radioItem.label }}</span>
          </span>
        </div>
        <div style="margin-bottom: 0.5rem">
          <div style="margin-bottom: 0.25rem">{{i18n('toUser','流转人')}}</div>
          <RxVueUserDialog v-model="form.toUser"></RxVueUserDialog>
        </div>
        <div style="margin-bottom: 0.5rem">
          <div style="margin-bottom: 0.25rem">{{i18n('approveOptions','审批类型')}}</div>
          <span v-for="radioItem in approveOptions">
            <radio :checked="radioItem.value == form.approveType" @click.stop="form.approveType=radioItem.value"/>
           <span style="margin-right: 1rem">{{ radioItem.label }}</span>
          </span>
        </div>
        <div style="margin-bottom: 0.5rem">
          <div style="margin-bottom: 0.25rem">{{i18n('notes','备注')}}</div>
          <textarea class="Transfer-textarea" v-model="form.opinion" :placeholder="i18n('enterNotes','请输入备注')" />
        </div>
        <div style="margin-bottom: 0.5rem" v-if="form.approveType=='parallel'">
          <div>{{i18n('completeOptions','完成配置')}}</div>
          <span v-for="radioItem in completeOptions">
            <radio :checked="radioItem.value == form.completeType" @click.stop="form.completeType=radioItem.value"/>
             <span style="margin-right: 1rem">{{ radioItem.label }}</span>
          </span>
        </div>
        <div style="margin-bottom: 0.5rem" v-if="form.completeType==1 && form.approveType=='parallel'">
          <div>{{i18n('completeJudgeOptions','计算类型')}}</div>
          <span v-for="radioItem in completeJudgeOptions">
            <radio :checked="radioItem.value == form.completeJudgeType"
                   @click.stop="form.completeJudgeType=radioItem.value"/>
           <span style="margin-right: 1rem">{{ radioItem.label }}</span>
          </span>
        </div>
        <div v-if="form.completeType==1 && form.approveType=='parallel'">
          <div>{{i18n('completeSetting','投票数')}}</div>
         <div style="display: flex;align-items: center">
           <input
               type="number"
               class="Transfer-number"
               v-model="form.completeSetting" :min="1"
           />
           <span
               v-if="form.completeJudgeType=='voteCount'">{{i18n('completeJudgeType','票')}}</span>
           <span v-else>%</span>
         </div>
        </div>
      </div>
    </template>
    <template v-slot:footer>
      <div class="bpm-footer">
        <div @click="closeWindow" class="bpm-footer-close">{{i18n('close','取消')}}</div>
        <div @click="handTrans" class="bpm-footer-ok">{{i18n('ok','确定')}}</div>
      </div>
    </template>
  </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout'
import BpmPublicApi from '@/api/rxBpm/BpmPublicApi'
import RxVueUserDialog from '@/components/RxVueUserDialog';
import BpmtaskApi from '@/api/rxBpm/bpmTask'

export default {
  name: "BpmTaskRoamTransfer",
  data() {
    return {
      subject: String,
      taskId: String,
      rules: {
        toUser: [{
          required: true,
          message:this.i18n('selectToUser','请选择流转人'),
          trigger: 'change'
        }]
      },
      msgOptions: [],
      transferOptions: [
        {label:this.i18n('waitAllVoted','返回'), value: 'waitAllVoted'},
        {label:this.i18n('jumpNext','审批下一步'), value: 'jumpNext'}
      ],
      approveOptions: [
        {label:this.i18n('sequential','串行'), value: 'sequential'},
        {label:this.i18n('parallel','并行'), value: 'parallel'}
      ],
      completeOptions: [
        {label:this.i18n('default','默认'), value: 0},
        {label:this.i18n('Advanced','高级配置'), value: 1}
      ],
      completeJudgeOptions: [
        {label:this.i18n('voteCount','票数'), value: 'voteCount'},
        {label:this.i18n('votePercent','百分比'), value: 'votePercent'}
      ],
      form: {
        transferType: "waitAllVoted",
        approveType: "parallel",
        completeType: 0,
        completeJudgeType: "voteCount",
        completeSetting: 1,
        opinion: "",
        toUser: [],
        msgTypes: []
      },
      aryNames: [],
      aryIds: []
    }
  },
  components: {
    RxLayout,
    RxVueUserDialog
  },
  onLoad(option) {
    let optionData = JSON.parse(option.data);
    this.subject = optionData.subject;
    this.taskId = optionData.taskId;
    this.init();
  },
  methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"bpmTaskLang.BpmTaskRoamTransfer",key);
      },
    init() {
      this.form.subject = this.subject;
      this.form.taskId = this.taskId;
      BpmPublicApi.getMessageHandler().then(res => {
        res.forEach((val) => {
          this.msgOptions.push({label: val.name, value: val.type})
        })
      })
    },
    handTrans() {
      let self_ = this;
      uni.showModal({
        title:this.i18n('tips','提示信息'),
        content:this.i18n('confirmFlowTips','确认流转任务吗?'),
        success: function (res) {
          if (res.confirm) {
            self_.onOk()
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    onOk() {
      BpmtaskApi.transRoamTask(this.form).then(res => {
          uni.showToast({
              title: res.message, // 消息内容
              duration: 2000, // 持续时间（单位：毫秒）
              icon: 'none' // 图标类型（可选值：success/loading/none）
          });
            if (res.success) {
              this.clickNavLeft(2)
            }
      })
    },
    closeWindow() {
      this.clickNavLeft()
    },
  }
}
</script>

<style scoped>
.Transfer-center{
  background: white;
  border-radius: 5px;
  padding: 0.5rem;
}
.Transfer-textarea {
  font-size: 0.8rem;
  height: 124px;
  width: calc(100% - 1rem) !important;
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid rgba(232, 232, 232, 1);
  padding: 10px 10px 10px 10px;
}
.Transfer-number{
  border-radius: 8px;
  border: 1px solid rgba(232, 232, 232, 1);
  width: 4rem;
  padding: 0px 0.5rem;
  margin-top: 0.25rem;
  margin-right: 0.25rem;
}
.bpm-footer {
  display: flex;
  grid-gap: 10px;
}

.bpm-footer-close {
  flex: 1;
    height: 2rem;
  opacity: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(232, 232, 232, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.65);
}

.bpm-footer-ok {
  flex: 1;
  height: 2rem;
  opacity: 1;
  border-radius: 8px;
  background: rgba(66, 133, 244, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: white;
}
</style>
